/*
  学习目标：生命周期 - 小结
  1. 挂载
      constructor - 创建前后，一般只能定义状态 state/ref/方法 等，不要在这里发送请求
      render - 渲染dom
      componentDidMount - 渲染后，可以发送请求，获取dom，定时器，绑定事件等
  2. 更新 - 千万不要在这里 setState 改变状态等
      render - 渲染dom
      componentDidUpdate - 更新后
  3. 卸载
      componentWillUnmount - 卸载，可以把 定时器，绑定事件 移除

*/
import React from 'react';
export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 100,
      isShow: true,
    };
    console.log('app - 创建了');
  }

  componentDidMount() {
    console.log('app - componentDidMount渲染完成了');
  }

  componentDidUpdate() {
    console.log('app - componentDidUpdate更新完成了');
  }

  render() {
    console.log('app - render');
    const { count, isShow } = this.state;
    return (
      <div>
        <button onClick={() => this.setState({ count: count + 1 })}>
          点我修改count
        </button>
        <button onClick={() => this.setState({ isShow: !isShow })}>
          点我切换子组件
        </button>
        <div>我是count - {count}</div>
        {isShow && <Child></Child>}
      </div>
    );
  }
}

class Child extends React.Component {
  constructor() {
    super();
    console.log('Child - 创建了');
  }

  componentDidMount() {
    console.log('Child - componentDidMount渲染完成了');
  }

  componentDidUpdate() {
    console.log('Child - componentDidUpdate更新完成了');
  }

  componentWillUnmount() {
    console.log('Child - componentWillUnmount销毁了');
  }

  render() {
    console.log('Child - render');
    return <div></div>;
  }
}
